<template>
    <div class="header-notification">
        <template v-for="(notifiaction) in list">
            <div :key="notifiaction.notification_id" class="header-notification__item header-notification__item--unread">
                <mmvAvatar :src="notifiaction.op_user.avatar_url" size="sm"></mmvAvatar>
                <div class="header-notification__content">
                    <div class="header-notification__header">
                        <div class="header-notifyaction__name">{{notifiaction.op_user.nickname}}</div>
                        <div class="header-notification__subtitle">回复了我的评论</div>
                    </div>
                    <div class="header-notification__text">{{notifiaction.content}}</div>
                    <div class="header-notification__time">一小时前</div>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
import mmvAvatar from "@/components/mmv-avatar.vue";

export default {
    props: {
        list: {
            type: Array,
            default: () => [],
        },
    },
    components: {
        mmvAvatar,
    },
};
</script>

<style lang="less">
.header-notification {
    color: #666;
    font-size: 14px;
    &__header {
        zoom: 1;
        display: flex;
        align-items: center;
        &::after {
            content: "";
            display: block;
            visibility: hidden;
            height: 0;
            clear: both;
            font-size: 0;
        }
    }
    &-system__header {
        display: block;
    }
    &__name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mmv-no-data {
        padding-top: 30px;
        &__text {
            line-height: 18px;
        }
    }
    &__item {
        border-bottom: 1px solid #f0f0f0;
        line-height: 18px;
        padding: 15px 0;
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        &--unread {
            &::before {
                content: "";
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background-color: #ffb2bf;
                position: absolute;
                left: -15px;
                top: 30px;
            }
        }
        .mmv-avatar {
            width: 36px;
            height: 36px;
        }
        &:last-child {
            border-bottom: none;
        }
        &__appeal {
            color: #00b2ff;
            margin-top: 6px;
            cursor: pointer;
        }
    }
    &__title {
        color: #666;
        flex-grow: 1;
    }
    &__subtitle {
        color: #ccc;
        margin-left: 10px;
        font-size: 12px;
    }
    &__name {
        color: #666;
        max-width: 115px;
    }
    &__content {
        flex: 1;
        flex-grow: 1;
        overflow: hidden;
        margin-left: 10px;
        line-height: 18px;
    }
    &__text {
        font-size: 12px;
        color: #333;
        pre {
            white-space: pre-wrap;
            word-wrap: break-word;
            word-break: break-word;
            line-height: 1.5;
        }
    }
    &__time {
        font-size: 12px;
        color: #ccc;
        flex-shrink: 0;
    }
    &__header &__time {
        float: right;
    }
    &__systext {
        line-height: 18px;
        word-wrap: break-word;
        word-break: break-word;
        .error-color {
            color: #ff667f;
        }
        .success-color {
            color: #88c700;
        }
    }
    &__syslabel {
        color: #999;
        flex-shrink: 0;
        .error-color {
            color: #ff667f;
        }
        .success-color {
            color: #88c700;
        }
    }
    &__sysline {
        color: #999;
    }
}
</style>